<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东商城-商品列表</title>
    <link rel="stylesheet" href="libs/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jd.css">

</head>
<body>
<!--头部-->
<div class="jd-head">
    <div class="container jd-breadnav">
        <ol class="breadcrumb">
            <li><a href="#">我的订单</a></li>
            <li><a href="#">我的京东</a></li>
            <li><a href="#">京东会员</a></li>
            <li><a href="#">企业采购</a></li>
            <li><a href="#">客户服务</a></li>
            <li><a href="#">网站导航</a></li>
            <li><a href="#">手机京东</a></li>
        </ol>
    </div>
</div>
<!--搜索-->
<div class="container jd-search-panel">
    <div class="row">
        <div class="col-md-2">
            <img src="images/logo.png" />
        </div>
        <div class="col-md-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="笔记本">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">搜索</button>
                </span>
            </div>
            <div class="jd-breadnav">
                <ol class="breadcrumb">
                    <li><a href="#">笔记本电脑</a></li>
                    <li><a href="#">笔记本子</a></li>
                    <li><a href="#">笔记本文具</a></li>
                    <li><a href="#">小米笔记本</a></li>
                    <li><a href="#">笔记本电脑 京东自营</a></li>
                    <li><a href="#">苹果笔记本</a></li>
                </ol>
            </div>
        </div>
        <!--<div class="col-md-3">-->
            <!--<span class="dropdown jd-mygwc">-->
                <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">购物车<span class="caret"></span></a>-->
                <!--<ul class="dropdown-menu">-->
                    <!--<li><a href="#">Action</a></li>-->
                    <!--<li><a href="#">Another action</a></li>-->
                    <!--<li><a href="#">Something else here</a></li>-->
                    <!--<li role="separator" class="divider"></li>-->
                    <!--<li><a href="#">Separated link</a></li>-->
                    <!--<li role="separator" class="divider"></li>-->
                    <!--<li><a href="#">One more separated link</a></li>-->
                <!--</ul>-->
            <!--</span>-->
        <!--</div>-->
    </div>
</div>
<!--导航-->
<div class="jd-nav jd-nav-list">
    <ul class="container nav nav-pills">
        <li class="jd-nav-allbtn"><a href="#">全部商品分类</a></li>
        <li><a href="#">京东时尚</a></li>
        <li><a href="#">美妆馆</a></li>
        <li><a href="#">超市</a></li>
        <li><a href="#">生鲜</a></li>
        <li><a href="#">全球购</a></li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">拍卖</a></li>
        <li><a href="#">金融</a></li>
    </ul>
</div>
<!--筛选-->
<div class="container">
    <div class="jd-sx-result">
        <span>全部结果 > </span>
        <label>"笔记本电脑"</label>
    </div>
    <div class="jd-sx-panel">
        <div class="jd-sx-item">
            <div class="jd-sx-title">
                品牌：
            </div>
            <div class="jd-sx-content">
                <ul class="nav nav-pills">
                    <li><a><img src="images/brand/1.jpg" /></a></li>
                    <li><a><img src="images/brand/2.png" /></a></li>
                    <li><a><img src="images/brand/3.jpg" /></a></li>
                    <li><a><img src="images/brand/4.jpg" /></a></li>
                    <li><a><img src="images/brand/5.jpg" /></a></li>
                    <li><a><img src="images/brand/6.jpg" /></a></li>
                </ul>
            </div>
        </div>
        <div class="jd-sx-item">
            <div class="jd-sx-title">
                电脑整机：
            </div>
            <div class="jd-sx-content">
                <ul class="nav nav-pills">
                    <li><a>笔记本</a></li>
                    <li><a>游戏本</a></li>
                    <li><a>平板电脑</a></li>
                    <li><a>服务器/工作站</a></li>
                    <li><a>笔记本配件</a></li>
                    <li><a>平板电脑配件</a></li>
                </ul>
            </div>
        </div>
        <div class="jd-sx-item">
            <div class="jd-sx-title">
                分类：
            </div>
            <div class="jd-sx-content">
                <ul class="nav nav-pills">
                    <li><a>轻薄本</a></li>
                    <li><a>常规笔记本</a></li>
                    <li><a>游戏本二合一</a></li>
                    <li><a>平板加固笔记本</a></li>
                    <li><a>二合一笔记本</a></li>
                    <li><a>娱乐平板</a></li>
                </ul>
            </div>
        </div>
        <div class="jd-sx-item">
            <div class="jd-sx-title">
                屏幕尺寸：
            </div>
            <div class="jd-sx-content">
                <ul class="nav nav-pills">
                    <li><a>11.6英寸</a></li>
                    <li><a>12.5英寸</a></li>
                    <li><a>13.3英寸</a></li>
                    <li><a>14.0英寸</a></li>
                    <li><a>15.6英寸</a></li>
                </ul>
            </div>
        </div>
        <div class="jd-sx-item">
            <div class="jd-sx-title">
                高级选项：
            </div>
            <div class="jd-sx-content">
                <ul class="nav nav-pills">
                    <li><a>处理器</a></li>
                    <li><a>系统</a></li>
                    <li><a>分辨率</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!--列表区-->
<div class="container jd-main">
    <div class="jd-main-left">
        <div class="jd-left-head">
            <label>商品精选</label>
            <span>广告</span>
        </div>
        <div class="jd-p-item">
            <img src="images/1.jpg" />
            <div class="jd-price">￥6499.00</div>
            <div>联想ThinkPad X280（1PCD）英特尔8代</div>
            <div class="jd-item-pj">已有<span>8921</span>人评价</div>
        </div>
        <div class="jd-p-item">
            <img src="images/1.jpg" />
            <div class="jd-price">￥6988.00</div>
            <div>微软（Microsoft）Surface Pro 6 二合一平板电脑笔记本 12.3英寸（第八代Core </div>
            <div class="jd-item-pj">已有<span>912</span>人评价</div>
        </div>
        <div class="jd-p-item">
            <img src="images/1.jpg" />
            <div class="jd-price">￥5699.00</div>
            <div>华硕（ASUS）游戏本笔记本电脑FX80/ZX80飞</div>
            <div class="jd-item-pj">已有<span>5285</span>人评价</div>
        </div>
    </div>
    <div class="jd-main-right">
        <div class="jd-main-sx">
            <div class="jd-main-order">
                <ul class="nav jd-item-handle jd-order-handle">
                    <li class="active"><a><span>综合</span><i class="jd-icon-sx jd-icon-arrow-white"></i></a></li>
                    <li><a><span>销量</span><i class="jd-icon-sx jd-icon-arrow-gray"></i></a></li>
                    <li><a><span>评论数</span><i class="jd-icon-sx jd-icon-arrow-gray"></i></a></li>
                    <li><a><span>新品</span><i class="jd-icon-sx jd-icon-arrow-gray"></i></a></li>
                    <li><a><span>价格</span><i class="jd-icon-sx jd-icon-arrow-gray"></i></a></li>
                </ul>
            </div>
            <div class="jd-main-peis">
                <span>配送至</span>
                <span class="dropdown jd-mygwc">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">北京朝阳区三环以内<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </span>
            </div>
        </div>
        <div class="row jd-main-list">
            <div class="col-md-3 jd-p-item">
                <img class="jd-s11" src="images/s11.png" />
                <div class="text-center"><img src="images/5.jpg" /></div>
                <div class="jd-price">￥6499.00</div>
                <div class="jd-item-intro"><a>联想ThinkPad X280（1PCD）英特尔8代酷睿12.5英寸轻薄笔记本电脑（i5-8250U</a></div>
                <div class="jd-item-pj"><a>8900+</a>条评价</div>
                <div class="jd-item-store"><a>ThinkPad京东自营旗舰店</a><i class="jd-icon-link"></i></div>
                <div>
                    <span class="jd-flag-zy">自营</span>
                    <span class="jd-flag-z">赠</span>
                </div>
                <ul class="nav jd-item-handle">
                    <li><a><i class="jd-icon jd-icon-check"></i><span>对比</span></a></li>
                    <li><a><i class="jd-icon jd-icon-heart"></i><span>关注</span></a></li>
                    <li><a style="color:red;"><i class="jd-icon jd-icon-gwc"></i><span>加入购物车</span></a></li>
                </ul>
            </div>
            <div class="col-md-3 jd-p-item">
                <div class="text-center"><img src="images/5.jpg" /></div>
                <div class="jd-price">￥6499.00</div>
                <div class="jd-item-intro"><a>联想ThinkPad X280（1PCD）英特尔8代酷睿12.5英寸轻薄笔记本电脑（i5-8250U</a></div>
                <div class="jd-item-pj"><a>8900+</a>条评价</div>
                <div class="jd-item-store"><a>ThinkPad京东自营旗舰店</a><i class="jd-icon-link"></i></div>
                <div>
                    <span class="jd-flag-zy">自营</span>
                    <span class="jd-flag-z">赠</span>
                </div>
                <ul class="nav jd-item-handle">
                    <li><a><i class="jd-icon jd-icon-check"></i><span>对比</span></a></li>
                    <li><a><i class="jd-icon jd-icon-heart"></i><span>关注</span></a></li>
                    <li><a style="color:red;"><i class="jd-icon jd-icon-gwc"></i><span>加入购物车</span></a></li>
                </ul>
            </div>
            <div class="col-md-3 jd-p-item">
                <div class="text-center"><img src="images/3.jpg" /></div>
                <div class="jd-price">￥6499.00</div>
                <div class="jd-item-intro"><a>联想ThinkPad X280（1PCD）英特尔8代酷睿12.5英寸轻薄笔记本电脑（i5-8250U</a></div>
                <div class="jd-item-pj"><a>8900+</a>条评价</div>
                <div class="jd-item-store"><a>ThinkPad京东自营旗舰店</a><i class="jd-icon-link"></i></div>
                <div>
                    <span class="jd-flag-zy">自营</span>
                    <span class="jd-flag-z">赠</span>
                </div>
                <ul class="nav jd-item-handle">
                    <li><a><i class="jd-icon jd-icon-check"></i><span>对比</span></a></li>
                    <li><a><i class="jd-icon jd-icon-heart"></i><span>关注</span></a></li>
                    <li><a style="color:red;"><i class="jd-icon jd-icon-gwc"></i><span>加入购物车</span></a></li>
                </ul>
            </div>
            <div class="col-md-3 jd-p-item">
                <div class="text-center"><img src="images/3.jpg" /></div>
                <div class="jd-price">￥6499.00</div>
                <div class="jd-item-intro"><a>联想ThinkPad X280（1PCD）英特尔8代酷睿12.5英寸轻薄笔记本电脑（i5-8250U</a></div>
                <div class="jd-item-pj"><a>8900+</a>条评价</div>
                <div class="jd-item-store"><a>ThinkPad京东自营旗舰店</a><i class="jd-icon-link"></i></div>
                <div>
                    <span class="jd-flag-zy">自营</span>
                    <span class="jd-flag-z">赠</span>
                </div>
                <ul class="nav jd-item-handle">
                    <li><a><i class="jd-icon jd-icon-check"></i><span>对比</span></a></li>
                    <li><a><i class="jd-icon jd-icon-heart"></i><span>关注</span></a></li>
                    <li><a style="color:red;"><i class="jd-icon jd-icon-gwc"></i><span>加入购物车</span></a></li>
                </ul>
            </div>
            <div class="col-md-3 jd-p-item">
                <div class="text-center"><img src="images/3.jpg" /></div>
                <div class="jd-price">￥6499.00</div>
                <div class="jd-item-intro"><a>联想ThinkPad X280（1PCD）英特尔8代酷睿12.5英寸轻薄笔记本电脑（i5-8250U</a></div>
                <div class="jd-item-pj"><a>8900+</a>条评价</div>
                <div class="jd-item-store"><a>ThinkPad京东自营旗舰店</a><i class="jd-icon-link"></i></div>
                <div>
                    <span class="jd-flag-zy">自营</span>
                    <span class="jd-flag-z">赠</span>
                </div>
                <ul class="nav jd-item-handle">
                    <li><a><i class="jd-icon jd-icon-check"></i><span>对比</span></a></li>
                    <li><a><i class="jd-icon jd-icon-heart"></i><span>关注</span></a></li>
                    <li><a style="color:red;"><i class="jd-icon jd-icon-gwc"></i><span>加入购物车</span></a></li>
                </ul>
            </div>
        </div>

    </div>
</div>
<!--底部-->
<div class="jd-footer">
    <div class="text-center jd-footer-link">
        <a href="#">关于我们</a><span>|</span>
        <a href="#">联系我们</a><span>|</span>
        <a href="#">联系客服</a><span>|</span>
        <a href="#">合作招商</a><span>|</span>
        <a href="#">商家帮助</a><span>|</span>
        <a href="#">营销中心</a>
    </div>
</div>
<script src="libs/jquery-3.3.1.js"></script>
<script src="libs/bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>